<template>
  <div style="padding: 10px">
    <el-radio-group
      v-model="tabPosition"
      style="margin-bottom: 10px"
      size="mini"
      @change="onChange"
    >
      <el-radio-button
        :label="item.label"
        v-for="(item, index) in Colour"
        :key="index"
      ></el-radio-button>
    </el-radio-group>
    <div style="margin-bottom: 10px" v-if="isClick==2">
      <el-button type="" icon="el-icon-plus" size="mini" @click="onAdd"
        >新建</el-button
      >
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" size="mini">
        <el-table-column prop="date" label="序号" width="55" align="center">
          <template slot-scope="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="factory_name" label="供应商" width="180">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="{ row }">
            <div
              :style="{
                color:
                  row.status == 1 ? '#67C23A' : row.status == 2 ? 'red' : '',
              }"
            >
              {{
                row.status == 0
                  ? "待确认"
                  : row.status == 1
                  ? "已通过"
                  : "已拒绝"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="images" label="封样确认表">
          <template slot-scope="{ row }">
            <el-image
              :src="item"
              fit="contain"
              v-for="(item, index) in row.images"
              :key="index"
              :preview-src-list="row.images"
              style="width: 60px; height: 60px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="更新时间"> </el-table-column>
        <el-table-column prop="adduser" label="更新人"> </el-table-column>
        <el-table-column prop="order_processor" label="理单员">
        </el-table-column>
        <el-table-column prop="address" label="操作" v-if="isClick==2">
          <template slot-scope="{ row }">
            <div v-if="row.status == 1 || row.status == 2">
              <el-button type="text" size="default" @click="onLook(row.id)"
                >查看</el-button
              >
            </div>
            <div v-else style="display: flex">
              <el-button type="text" size="default" @click="onLook(row.id)"
                >查看</el-button
              >
              <el-button type="text" size="default" @click="onEdit(row.id)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="default"
                @click="onPass(row.id)"
                style="color: #67c23a"
                >通过</el-button
              >
              <el-button
                type="text"
                size="default"
                @click="onRefuse(row.id)"
                style="color: #f56c6c"
                >拒绝</el-button
              >
              <!-- <download-excel
                class="export-excel-wrapper"
                :data="position_exhibition_list"
                :fields="json_fields"
                :before-generate="
                  () => {
                    return startDownload(row.id);
                  }
                "
                :title="detail.number + '-' + tabPosition + '的封样报告'"
                :name="detail.number + '-' + tabPosition + '的封样报告.xls'"
                style="margin-left: 10px"
              >
                <el-button type="text">导出</el-button>
              </download-excel> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="上传图片"
      :visible.sync="dialogVisible"
      width="30%"
      :modal="false"
    >
      <div>
        <div style="display: flex; margin-top: 10px">
          <el-upload
            class="avatar-uploader"
            action="https://ssy.13yu.com/index.php/Admin/Api/upload"
            :on-success="
              (response) => {
                return handleSuccess(response, index);
              }
            "
            :before-remove="
              (response) => {
                return handleRemoves(response);
              }
            "
            list-type="picture-card"
            :file-list="images"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <div class="fileimg">
                <img class="el-upload-list__item-thumbnail" :src="file.url" />
              </div>

              <span class="el-upload-list__item-actions">
                <!-- <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span> -->
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemoves(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!images.length"
          @click="onSubmit"
          :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminOperateGetStyleColour,
  postAdminOperateget_sealed_sample_report_list,
  postAdminOperateset_sealed_sample_report_refuse,
  postAdminOperateset_sealed_sample_report_pass,
  postAdminOperateget_sealed_sample_report_detail,
} from "@/api";
export default {
  props: {
    id: "",
    detail: {},
    isClick:""
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      Colour: [],
      tabPosition: "",
      tableData: [],
      images: [],
      json_fields: {
        部位: "position_title",
        测量方法: "position_method",
        工艺尺寸: `size_code`,
        封样尺寸: "seal_code",
        误差: "tolerance",
        版实长: "sample_code",
      },
      position_exhibition_list: [],
    };
  },
  async mounted() {
    await this.postAdminOperateGetStyleColour();
    await this.postAdminOperateget_sealed_sample_report_list();
  },
  methods: {
    onLook(id) {
      this.$router.push({
        name: `CustomModuleFybgLook`,
        query: { id },
      });
    },
    async startDownload(id) {
      let obj = {
        id,
      };
      try {
        let res = await postAdminOperateget_sealed_sample_report_detail(obj);
        let data = res.data;
        let position_exhibition_list = data.position_exhibition_list;
        let keys = Object.keys(data.position_list[0].code_list);
        let size = keys[0];
        for (let index = 0; index < position_exhibition_list.length; index++) {
          position_exhibition_list[index].size_code =
            position_exhibition_list[index].code_list[size];
        }
        console.log("position_exhibition_list", position_exhibition_list);
        this.position_exhibition_list = position_exhibition_list;
      } catch (error) {}
    },
    async postAdminOperateget_sealed_sample_report_detail(id) {},
    handleSuccess(response) {
      let { images } = this;
      console.log("response", response);
      images.push(response.img);
      this.images = images;
    },
    async onSubmit() {
      this.loading = true;
      let { id, images } = this;
      let color = this.color();
      let type_no = this.detail.number;
      let obj = {
        id,
        type_no,
        colour_number: color.colour_number,
        images,
      };
      try {
        let res = await postAdminOperateset_sealed_sample_report_pass(obj);
        this.postAdminOperateget_sealed_sample_report_list();
        this.loading = false;
        this.images = [];
        this.dialogVisible = false;
      } catch (error) {
        this.loading = false;
      }
    },
    onPass(id) {
      this.id = id;
      this.dialogVisible = true;
    },
    handleRemoves(file) {
      let { images } = this;
      let index = images.findIndex((e) => e.url == file.url);
      images.splice(index, 1);
      this.images = images;
      return true;
    },
    async onRefuse(id) {
      let color = this.color();
      let type_no = this.detail.number;
      let obj = {
        id,
        type_no,
        colour_number: color.colour_number,
      };
      this.$confirm("确定拒绝？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await postAdminOperateset_sealed_sample_report_refuse(obj);
          this.postAdminOperateget_sealed_sample_report_list();
        })
        .catch(() => {});
    },
    async onEdit(id) {
      this.$router.push({
        name: `CustomModuleFybgAdd`,
        query: { id },
      });
    },
    onChange() {
      this.postAdminOperateget_sealed_sample_report_list();
    },
    async postAdminOperateget_sealed_sample_report_list() {
      let color = this.color();
      let obj = {
        colour_number: color.colour_number,
        type_no: this.detail.number,
        page: 1,
        size: 1000,
      };
      let res = await postAdminOperateget_sealed_sample_report_list(obj);
      this.tableData = res.data;
    },
    color() {
      let { Colour, tabPosition } = this;
      let color;
      for (let index = 0; index < Colour.length; index++) {
        const element = Colour[index];
        if (Colour[index].label == tabPosition) {
          color = Colour[index];
        }
      }
      return color;
    },
    onAdd() {
      let color = JSON.stringify(this.color());
      this.$router.push({
        name: `CustomModuleFybgNew`,
        query: { type_no: this.detail.number, color },
      });
    },
    // 颜色
    async postAdminOperateGetStyleColour() {
      let id = this.detail.id;
      console.log(id);
      let obj = {
        id,
      };

      let res = await postAdminOperateGetStyleColour(obj);
      let data = res.data;
      if (data.length) {
        for (let index = 0; index < data.length; index++) {
          data[
            index
          ].label = `${data[index].colour_number}(${data[index].colour})`;
        }
        this.Colour = data;
        this.tabPosition = data[0].label;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>